<template>
  <div>
    <div v-if="showType == 'table'">
      <el-card>
        <el-row :gutter="4">
          <el-form :inline="true" label-position="left" label-width="100px">
            <el-form-item>
              <el-input
                v-model="searchDto.name"
                placeholder="请输入培训主题/培训地点"
                style="width: 250px"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-date-picker
                v-model="daterange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy年MM月dd日"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-search" type="primary" @click="search">
                查询
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-s-open" type="primary" @click="clear">
                重置
              </el-button>
            </el-form-item>
            <el-form-item class="clear_item-margin-bottom">
              <el-button type="primary" icon="el-icon-plus" @click="add"
                >新建技能培训
              </el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <page-table
          ref="multipleSelection"
          :page-data="pageData"
          :loading="loading"
          :do-get-page-data="getPageData"
        >
          <el-table-column
            prop="id"
            label="编号"
            align="center"
            width="50px"
          ></el-table-column>
          <el-table-column prop="title" label="培训主题" align="center">
          </el-table-column>
          <el-table-column prop="startTime" label="培训开始时间" align="center">
          </el-table-column>
          <el-table-column prop="endTime" label="培训结束时间" align="center">
          </el-table-column>
          <el-table-column
            prop="site"
            label="培训地点"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <span :style="{ color: setColor(scope.row.publishStatus) }">
                {{ scope.row.publishStatus | keyText("QUESTION_STATUS") }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            label="管理"
            width="240"
            align="center"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-tooltip
                content="编辑"
                placement="top"
                v-if="scope.row.publishStatus !== 'PUBLISH'"
              >
                <el-button
                  type="button"
                  size="mini"
                  icon="el-icon-edit"
                  @click="edit(scope.row)"
                >
                </el-button>
              </el-tooltip>
              <el-tooltip v-else content="下架" placement="top">
                <el-button
                  type="button"
                  size="mini"
                  icon="el-icon-bottom"
                  @click="out(scope.row)"
                >
                </el-button>
              </el-tooltip>
              <el-tooltip content="详情" placement="top">
                <el-button
                  type="button"
                  size="mini"
                  icon="el-icon-search"
                  @click="info(scope.row)"
                >
                </el-button>
              </el-tooltip>
              <el-tooltip content="二维码" placement="top">
                <el-button
                  type="button"
                  size="mini"
                  icon="el-icon-picture-outline"
                  @click="qrCode(scope.row)"
                >
                </el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-button
                  size="mini"
                  icon="el-icon-delete"
                  @click="del(scope.row)"
                >
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </page-table>
      </el-card>
      <el-dialog title="二维码" :visible.sync="showQrCode" width="500px">
        <div class="image-preview">
          <el-image v-if="src" :src="baseUrl + src"></el-image>
          <el-empty v-else description="暂无数据"></el-empty>
        </div>
      </el-dialog>
    </div>
    <div v-if="showType == 'edit'">
      <el-card>
        <el-form ref="form" :model="form" :rules="rules" label-width="150px">
          <el-form-item label="培训主题" prop="title">
            <el-input
              v-model="form.title"
              placeholder="请输入培训主题"
            ></el-input>
          </el-form-item>
          <el-form-item label="培训内容" prop="content">
            <el-input
              class="w400"
              type="textarea"
              :rows="2"
              v-model="form.content"
              placeholder="请输入培训内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="培训时间" prop="date">
            <el-date-picker
              class="w400"
              v-model="date"
              type="daterange"
              range-separator="至"
              start-placeholder="培训开始日期"
              end-placeholder="培训结束日期"
              format="yyyy年MM月dd日"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="培训地点" prop="site">
            <el-input
              v-model="form.site"
              placeholder="请输入培训地点"
            ></el-input>
          </el-form-item>
          <el-form-item label="现场监控地址" prop="videoUrl">
            <el-input
              v-model="form.videoUrl"
              placeholder="请输入现场监控地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input
              class="w400"
              type="textarea"
              :rows="2"
              v-model="form.remark"
              placeholder="请输入备注"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="save('SAVE')">保存</el-button>
            <el-button
              v-if="form.publishStatus == 'SAVE'"
              type="success"
              @click="save('PUBLISH')"
              >发布
            </el-button>
            <el-button
              v-if="form.publishStatus == 'PUBLISH'"
              type="warning"
              @click="save('SAVE')"
              >下架
            </el-button>
            <el-button @click="showType = 'table'"> 返回 </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <skillDetail
      v-if="showType == 'detail'"
      :sid="sid"
      @back="showType = 'table'"
      @getData="getPageData"
    ></skillDetail>
  </div>
</template>
<script>
import skillDetail from "./skillDetail.vue";

export default {
  name: "skill",
  components: {
    skillDetail,
  },
  created() {
    this.getPageData();
  },
  data() {
    let validateDate = (rule, value, callback) => {
      if (this.date.length == 0) {
        callback(new Error("请选择培训时间"));
      } else {
        callback();
      }
    };
    return {
      daterange: [],
      date: [],
      pageData: {},
      showType: "table",
      baseUrl: window.api.image + "/",
      src: "",
      showQrCode: false,
      loading: false,
      searchDto: {
        name: "",
      },
      // disInfo: {},
      form: {
        title: "",
        content: "",
        site: "",
        remark: "",
      },
      rules: {
        title: [{ required: true, message: "请输入培训主题", trigger: "blur" }],
        content: [
          { required: true, message: "请输入培训内容", trigger: "blur" },
        ],
        date: [{ required: true, validator: validateDate, trigger: "change" }],
        site: [{ required: true, message: "请输入培训地点", trigger: "blur" }],
      },
      sid: "",
    };
  },
  methods: {
    // 获取分页数据
    getPageData(val) {
      let tem = Object.assign(this.searchDto, val);
      tem.startTime = this.daterange[0];
      tem.endTime = this.daterange[1];
      this.API.getSkillTrainingPageList(tem).then((ret) => {
        this.pageData = ret.data;
      });
    },
    add() {
      this.form = {
        title: "",
        content: "",
        site: "",
        remark: "",
      };
      this.date = [];
      this.showType = "edit";
    },
    // 查询
    search() {
      this.getPageData();
    },
    //清空
    clear() {
      this.searchDto = {
        name: "",
      };
      this.daterange = [];
      this.getPageData();
    },
    //编辑
    edit({ id }) {
      this.API.getSkillTrainingById({ id }).then((ret) => {
        let { startTime, endTime } = ret.data;
        this.form = ret.data;
        this.date = [startTime, endTime];
        this.showType = "edit";
      });
    },
    //下架
    out(row) {
      this.$confirm("确认下架?").then(() => {
        row.publishStatus = "SAVE";
        this.API.addOrUpdateSkillTraining({ body: row }).then((ret) => {
          this.success("下架成功!");
        });
      });
    },
    // 详情
    info({ id }) {
      this.sid = id;
      this.showType = "detail";
    },
    // 二维码
    qrCode({ qrCode }) {
      this.src = qrCode;
      this.showQrCode = true;
    },
    // 删除
    del({ id }) {
      this.$confirm("确认删除?", "提示", {
        type: "warning",
      }).then(() => {
        this.API.deleteSkillTrainingById({ id }).then((ret) => {
          this.success("删除成功!");
          this.getPageData();
        });
      });
    },
    save(status) {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.$confirm("确认提交?").then(() => {
            let body = this.form;
            body.startTime = this.date[0];
            body.endTime = this.date[1];
            body.publishStatus = status;
            this.API.addOrUpdateSkillTraining({ body }).then((ret) => {
              let { id } = ret.data;
              this.API.qrCode({
                content: id,
                format: "png",
                savePath: "qrCode",
                width: "400",
                height: "400",
              }).then((res) => {
                ret.data.qrCode = res.data.value;
                this.API.addOrUpdateSkillTraining({ body: ret.data }).then(
                  (ret) => {
                    this.success("保存成功!");
                    this.showType = "table";
                    this.search();
                  }
                );
              });
            });
          });
        } else {
          return false;
        }
      });
    },
    // 设置状态颜色
    setColor(val) {
      let color = "";
      switch (val) {
        case "PUBLISH":
          color = "#67C23A";
          break;
        case "SAVE":
          color = "#409EFF";
          break;
        case "FINISH":
          color = "#F56C6C";
          break;
        default:
          color = "#606266";
          break;
      }
      return color;
    },
  },
};
</script>
<style scoped>
.el-input {
  width: 400px;
}

.w400 {
  width: 400px;
}

.image-preview {
  text-align: center;
  border: 1px solid #ebeef5;
  padding: 10px;
}
</style>
